<template>
  <div>
    <Header class="header" />
    <!-- 角色列表区域 -->
    <el-table :data="idFilter(roles.rolesList)" border stripe>
      <!-- 权限展开列 -->
      <el-table-column type="expand" min-width="48px">
        <template v-slot="scope">
          <el-row v-for="(item1, index1) in scope.row.children" :key="item1.id"
            :class="['bd_botton', index1 === 0 ? 'bd_top' : '', 'vc_center']">
            <!-- 渲染一级权限 -->
            <el-col :span="8">
              <el-tag closable @close="removeRightsById(scope.row, item1.id)">
                {{ item1.authName }}
              </el-tag>
              <el-icon>
                <CaretRight />
              </el-icon>
            </el-col>
            <!-- 渲染二级和三级权限 -->
            <el-col :span="16">
              <el-row v-for="(item2, index2) in item1.children" :key="item2.id"
                :class="[index2 > 0 ? 'bd_top' : '', 'vc_center']">
                <!-- 二级权限 -->
                <el-col :span="12">
                  <el-tag type="success" closable @close="removeRightsById(scope.row, item2.id)">
                    {{ item2.authName }}
                  </el-tag>
                  <el-icon>
                    <CaretRight />
                  </el-icon>
                </el-col>
                <!-- 三级权限 -->
                <el-col :span="12">
                  <el-row v-for="(item3, index3) in item2.children" :key="item3.id">
                    <el-col :span="24">
                      <el-tag type="warning" closable @close="removeRightsById(scope.row, item3.id)">
                        {{ item3.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 不渲染直接加载json -->
          <!-- <pre>
              {{ scope.row }}
            </pre> -->
        </template>
      </el-table-column>
      <el-table-column label="角色ID" prop="id" min-width="130px"></el-table-column>
      <el-table-column label="角色名称" prop="roleName" min-width="130px"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc" min-width="180px"></el-table-column>
      <el-table-column label="操作" width="270px" fixed="right">
        <template v-slot="scope">
          <el-button type="primary" icon="EditPen" size="small" @click="editRole(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" icon="Delete" size="small" @click="deleteRole(scope.row)">
            删除
          </el-button>
          <el-button type="warning" icon="Setting" size="small" @click="assignRights(scope.row)">
            分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import Header from "@/views/Rights/Roles/components/header.vue";
import useStore from '@/pinia/index.js';
const { roles } = useStore();

// 获取数据
roles.REQUEST_rolesList()
// 编辑角色
const editRole = (row) => {
  // 当前待编辑角色信息存入store
  roles.editRole = row;
  // 显示编辑角色弹窗
  roles.editDialog = true;
}
// 删除角色
const deleteRole = (row) => {
  // 当前待删除角色信息存入store
  roles.deleteRole = row
  // 执行删除
  roles.REQUEST_deleteRoles()
}
// 分配权限
const assignRights = (row) => {
  // 获取权限列表（tree形式）
  roles.REQUEST_rightsList()
  // 当前待编辑角色信息存入store
  roles.assignRights = row;
  // 显示分配权限弹窗
  roles.assignDialog = true;
  // 获取当前角色的所有选中权限id
  getLeafKeys(row)
}
// 递归获取当前角色所有权限的id，并保存到 defKeys 数组中
const getLeafKeys = (row) => {
  // 如果当前节点不包括children属性，则说明当前节点是最后节点（三级节点），把当前节点的id保存到数组中
  if (!row.children) {
    return roles.defKeys.push(row.id);
  }
  // 如果当前节点包括children属性，则递归调用getLeafKeys方法，把当前节点的id保存到数组中
  row.children.forEach((item) => {
    getLeafKeys(item);
  });
}
// 根据ID删除指定权限
const removeRightsById = (row, rightId) => {
  // 当前待删除权限信息存入store
  roles.deleteParams.id = row.id;
  roles.deleteParams.rightId = rightId;
  // 执行删除
  roles.REQUEST_deleteRights()
}
// 过滤方法
const idFilter = (Array) =>
  Array.filter(
    (item) => !roles.searchId || item.id.toString().includes(roles.searchId)
  )

</script>

<style lang="less" scoped>
.el-tag {
  margin: 10px
}

.header {
  margin-bottom: 20px;
}

.vc_center {
  display: flex;
  align-items: center;
}

.bd_botton {
  border-bottom: 1px solid #eee;
}

.bd_top {
  border-top: 1px solid #eee;
}
</style>